<div class=" ui-g">
    <!-- 搜索 begin-->
    <div class="ui-g-12 ui-g-nopad">
        <p-panel header="筛选查询" [collapsed]="false" headerClass="bg-eaeaea border-none" headerClass="bg-eaeaea border-none" search="用户ID/手机号"  (onSearch)="search($event)" (searchTextChange)="searchTextChange($event);">
            <!-- <div class="p-b-20 border-b-d9d9d9">
                    <p-selectButton [canDelete]="true" [options]="types" (onChange)="normalSearch()" optionLabel="type" [(ngModel)]="searchObj.selectedType"></p-selectButton>
            </div> -->
            <div class="">
                <div class="m-r-15 inline-block">
                    <span class="p-r-10">性别：</span>
                    <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-150" [options]="sexSerchArr" [(ngModel)]="searchObj.sex"></p-dropdown>
                </div>
                <div class="m-r-15 inline-block">
                    <span class="p-r-10">生日：</span>
                    <p-calendar [(ngModel)]="searchObj.birthday" placeholder="请选择生日" styleClass="p-calendar  width-150" inputStyleClass="height-full"
                        [minDate]='selectedObj.insuranceEndTimeMinDate'></p-calendar>
                </div>
                <div class="m-r-15 inline-block">
                        <span class="p-r-10">来源：</span>
                        <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-150" [options]="sourceArr" [(ngModel)]="searchObj.source"></p-dropdown>
                    </div>
                <div class="m-r-15 inline-block">
                    <span class="p-r-10">地区：</span>
                    <input type="text" placeholder="请输入地区" class="p-input width-150" pInputText [(ngModel)]="searchObj.addressChinese">
                </div>
                <div class="inline-block pull-right">
                    <button pButton type="button" (click)="search()" label="查询" class="btn btn-success m-r-10"></button>
                    <button icon="fa-search-plus" pButton type="button" (click)="isShowH = true" label="高级搜索" class="btn btn-primary"></button>
                </div>
            </div>

        </p-panel>
    </div>
    <!-- 搜索 end-->

    <!-- 列表 begin-->
    <div class="ui-g-12 ui-g-nopad m-t-20">
        <div class="content-section implementation b-b-25">
            <p-dataTable [value]="listData" [totalRecords]="totalRecords" [rows]="20" [rowsPerPageOptions]="[20,50,100,300]" [loading]="loading"
                [lazy]="true" (onLazyLoad)="loadCarsLazy($event)" scrollHeight="100px" [paginator]="true" [pageLinks]="4" [(selection)]="selectedItem"
                [headerCheckboxToggleAllPages]="true" [emptyMessage]="'没有搜到您想要的数据'">
                <p-header>
                    <button pButton type="button" label="支付记录" class="btn btn-secondary" (click)="openPayment()"></button>
                    <button pButton type="button" label="禁用" class="btn btn-secondary" (click)="stopUsing()"></button>
                    <button pButton type="button" label="启用" class="btn btn-secondary" (click)='startUsing()'></button>
                </p-header>
                <p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column>
                <p-column *ngFor="let col of colsSelected" [field]='col.field' [header]='col.header' [sortable]="col.sortable" [style]="{'width':col.width}" >
                    <ng-template let-index='rowIndex' let-data='rowData' pTemplate='body' *ngIf="col.tem">
                        <div *ngIf="col.field === 'code'" (click)="edit(data.code)" style="color:#1a91eb;cursor:pointer;">
                            {{data.code}}
                        </div>
                        <span *ngIf="col.field === 'portraitPath'">
                            <img src="{{data.portraitPath}}" class="user-img v-middle h-pointer" style="height:30px;">
                        </span>
                        <span *ngIf="col.field === 'isEffect'">
                            {{data.isEffect==true ? '已启用':'已禁用'}}
                        </span>
                    </ng-template>
                </p-column>
            </p-dataTable>
        </div>

    </div>
    <!-- 列表 end-->

    <!-- 高级搜索 brgin-->
    <p-dialog header="添加筛选条件" [(visible)]="isShowH" modal="modal" width="800" [responsive]="true">
            <p-header>
                <span class="font-12">  (注：将您要添加的筛选条件进行改动，就视为添加该筛选条件。如不需要，请改回默认。)</span>
            </p-header>

            <div class="ui-g">
                <div class="ui-g-6">
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">用户ID：</div>
                        <div class="table-cell">
                            <input type="text" placeholder="请输入用户ID" class="p-input width-220" pInputText [(ngModel)]="searchHighObj.code">
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">性别：</div>
                        <div class="table-cell ">
                            <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-220" [options]="sexSerchArr" [(ngModel)]="searchHighObj.sex"></p-dropdown>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">来源：</div>
                        <div class="table-cell">
                            <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-220" [options]="sourceArr" [(ngModel)]="searchHighObj.source"></p-dropdown>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">喜欢的风格：</div>
                        <div class="table-cell">
                            <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-220" [options]="favoriteStyleArr" [(ngModel)]="searchHighObj.favoriteStyle"></p-dropdown>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">注册时间(开始)：</div>
                        <div class="table-cell ">
                            <p-calendar [(ngModel)]="searchHighObj.registerTimeBegin" placeholder="请选择注册时间(开始)" styleClass="p-calendar  width-220" inputStyleClass="height-full"
                                (onSelect)="calendarChangeHigh('registerTimeBegin')" [maxDate]='selectedHighObj.registerTimeEnd' ></p-calendar>
                        </div>
                    </div>
                </div>

                <div class="ui-g-6">
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">手机号：</div>
                        <div class="table-cell">
                            <input type="text" placeholder="请输入手机号" class="p-input width-220" pInputText [(ngModel)]="searchHighObj.phoneNumber">
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">生日：</div>
                        <div class="table-cell">
                            <p-calendar [(ngModel)]="searchHighObj.birthday" placeholder="请选择生日" styleClass="p-calendar  width-220" inputStyleClass="height-full"></p-calendar>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">地区：</div>
                        <div class="table-cell ">
                            <input type="text" placeholder="请输入地区" class="p-input width-220" pInputText [(ngModel)]="searchHighObj.addressChinese">
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">状态：</div>
                        <div class="table-cell ">
                            <p-dropdown [justValue]="true" dataKey="code" optionLabel="name" styleClass="width-220" [options]="statusArr" [(ngModel)]="searchHighObj.isEffect"></p-dropdown>
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-r-10">注册时间(结束)：</div>
                        <div class="table-cell ">
                            <p-calendar [(ngModel)]="searchHighObj.registerTimeEnd" placeholder="请选择注册时间(结束)" styleClass="p-calendar  width-220" inputStyleClass="height-full"
                                (onSelect)="calendarChangeHigh('registerTimeEnd')" [minDate]='selectedHighObj.registerTimeBegin' ></p-calendar>
                        </div>
                    </div>
                </div>

            </div>

            <p-footer>
                <button pButton type="button" (click)="searchHighObj={};selectedHighObj={};" label="重置" class="btn btn-secondary m-r-20" ></button>
                <button pButton type="button" (click)="searchHigh()" label="查询" class="btn btn-success"></button>
            </p-footer>
    </p-dialog>
    <!-- 高级搜索 end-->

    <!-- 支付记录 begin-->
    <p-dialog header="支付记录" [(visible)]="isShowP" modal="modal" width="700" [responsive]="true">
        <p-dataTable [value]="paymentList" [showTableHeader]="true" >
            <p-column field="projectCode" header="项目编号" ></p-column>
            <p-column field="projectName" header="项目名称" ></p-column>
            <p-column field="fundName" header="款项名称"></p-column>
            <p-column field="money" header="金额" ></p-column>
            <p-column field="payWay" header="支付方式" ></p-column>
            <p-column field="payTime" header="支付时间" ></p-column>
        </p-dataTable>
    </p-dialog>
    <!-- 支付记录 end-->

    <!-- 表单 begin-->
    <p-dialog [header]="isEdit?'修改资料':'用户查看'" [(visible)]="isShow" modal="modal" width="700" [responsive]="true" (onHide)="isEdit?isEdit=!isEdit:'';search();">
        <div class="text-center">
            <div class="inline-block">
                <form #form="ngForm" (ngSubmit)="form.form.valid" novalidate class="form-horizontal" role="form" [ngClass]="{'disabled-readonly':!isEdit}" >
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" [ngClass]="isEdit?'p-required':'p-required-emp'" >手机号：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left" relative >
                            <input type="text" [disabled]="errorObj.phoneNumber?.way"  name="phoneNumber" #phoneNumber="ngModel" [(ngModel)]="formObj.phoneNumber"  class="p-input" size="11" pInputText
                                maxlength="11" required pattern="^1[3|4|5|7|8][\d]{9}|0[\d]{2,3}-[\d]{7,8}$"
                                (blur)="verifyFields(phoneNumber,formObj);uniqueFTelephone(phoneNumber);" (focus)="submited=false;clearVerify(phoneNumber);">
                            <p-message [severity]="'error'"
                                [text]="{'请输入手机号':(phoneNumber.errors?.required&&(errorObj.phoneNumber?.show || submited))||errorObj.phoneNumber?.blank
                                        ,'格式不正确':phoneNumber.errors?.pattern&&(errorObj.phoneNumber?.show || submited)
                                        ,'手机号已存在':errorObj.phoneNumber?.exist}">
                            </p-message>
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.phoneNumber}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" >姓名：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left">
                            <input type="text"  name="name" #name="ngModel" [(ngModel)]="formObj.name" class="p-input"  pInputText >
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.name}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" style="vertical-align:middle">头像：</div>
                        <div class="table-cell table-text" align="left" >
                            <!-- <p-lightboxfile styleClass="inline-block" [images]="portraitArr" [showDelete]="showView" ></p-lightboxfile> -->
                            <img src="{{formObj.portraitPath}}" class="user-img v-middle h-pointer" style="height:50px;">
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" >昵称：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left" relative>
                            <input type="text" name="nickname" #nickname="ngModel" [(ngModel)]="formObj.nickname" maxlength="8" class="p-input"  pInputText >
                            <p-message severity="info" text="最多输入8个字"></p-message>
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.nickname}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" >性别：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left">
                            <p-radioButton *ngFor="let item of sexArr"  value="{{item.code}}" label="{{item.name}}"
                                name="sex" #sex="ngModel" [(ngModel)]="formObj.sex">
                            </p-radioButton>
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.sexDic}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" >生日：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left">
                            <p-calendar placeholder="请选择生日" [dataType]="timeConfig.dataType" [monthNavigator]="timeConfig.monthNavigator"
                                [locale]="timeConfig.locale" styleClass="p-calendar width-220" inputStyleClass="height-full" [showIcon]="timeConfig.showIcon" [selectOtherMonths]="timeConfig.selectOtherMonths"
                                [dateFormat]="timeConfig.dateFormat" name="birthday" #birthday="ngModel" [(ngModel)]="formObj.birthday" ></p-calendar>
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.birthday}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25">
                                地区：
                        </div>
                        <div class="table-cell width-390" *ngIf="isEdit" align="left">
                            <p-dropdown  placeholder="省" [style]="{'width':'32%'}" [options]="addressProvinceArr" [(ngModel)]="selectedObj.addressProvince"
                                [ngModelOptions]="{standalone: true}" optionLabel="area_name" (onChange)='addressChange("province")'></p-dropdown>
                            <p-dropdown  placeholder="市" [style]="{'width':'32%'}" [options]="addressCityArr" [(ngModel)]="selectedObj.addressCity"
                                [ngModelOptions]="{standalone: true}" optionLabel="area_name" (onChange)='addressChange("city")'></p-dropdown>
                            <p-dropdown  placeholder="区/镇/乡" [style]="{'width':'32%'}" [options]="addressAreaArr" [(ngModel)]="selectedObj.addressArea"
                                [ngModelOptions]="{standalone: true}" optionLabel="area_name"></p-dropdown>
                        </div>
                        <div class="table-cell width-390 table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.addressChinese}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25" >常住住址：</div>
                        <div class="table-cell"*ngIf="isEdit" align="left">
                            <input type="text"  name="addressDetail" #addressDetail="ngModel" [(ngModel)]="formObj.addressDetail" class="p-input" maxlength="60" pInputText >
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.addressDetail}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25">喜欢的风格：</div>
                        <div class="table-cell" *ngIf="isEdit" align="left">
                            <p-dropdown name="dropdown" styleClass="p-calendar text-left width-220" [options]="favoriteStyleArr"
                                [(ngModel)]="formObj.favoriteStyle" [justValue]="true" dataKey="code" optionLabel="name"></p-dropdown>
                        </div>
                        <div class="table-cell table-text" *ngIf="!isEdit" align="left" >
                            {{formObj.favoriteStyleDic}}
                        </div>
                    </div>
                    <div class="table-row">
                        <div class="table-cell text-right p-l-25"></div>
                        <div class="table-cell text-left">
                            <button pButton type="button" *ngIf="!isEdit"  [label]="'编辑'" class="btn-secondary" style="left: 70px;" (click)="isEdit=true;"></button>
                            <button pButton type="button" *ngIf="isEdit"   [label]="'保存'" class="btn-success" style="left: 70px;" (click)="(form.form.valid&&isEdit)?save():submited=true;"></button>
                            <!-- <button pButton type="button" [disabled]="isEdit?(!form.form.valid || errorObj.phoneNumber?.way || errorObj.phoneNumber?.exist):false" (click)="form.form.valid?'':submited = true;(form.form.valid&&isEdit)?save():isEdit=true;" [label]="isEdit?'保存':'编辑'" class="btn btn-secondary m-btn-dialog" style="left: 70px;"></button> -->
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </p-dialog>
    <!-- 表单 end-->

</div>